<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cont{margin:0 auto;position: relative;}
    .cont .box{padding: 4px;float: left;}
    .cont .box .imgbox{border: solid 1px black;padding: 4px;}
    .cont .box .imgbox img{width:200px;display: block;}
  </style>
</head>
<body>
  <div class="cont">
    <div class="box">
      <div class="imgbox">
        <img src="./imgs/0.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="imgbox">
        <img src="./imgs/1.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="imgbox">
        <img src="./imgs/2.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="imgbox">
        <img src="./imgs/3.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="imgbox">
        <img src="./imgs/4.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="imgbox">
        <img src="./imgs/5.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="imgbox">
        <img src="./imgs/6.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="imgbox">
        <img src="./imgs/7.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="imgbox">
        <img src="./imgs/8.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="imgbox">
        <img src="./imgs/9.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="imgbox">
        <img src="./imgs/10.jpg" alt="">
      </div>
    </div>
  </div>
</body>
<script>

  // 分析：瀑布流，第一行浮动（交给css），其他行定位并计算位置
  // 1. 获取元素
  // 2. 区分第一行和其他行（计算一行最多能放几个元素）
  // 3. 获取第一行所有元素高度，作为初始列高
  // 4. 在其他行，获取最小列高，将最小列高设置为top，根据最小列高的索引计算left，改变最小列高：原列高+当前元素高度

  // 设计
  // class Waterfall{
  //   constructor(eles){
  //     // 1. 获取元素
  //     this.eles = eles;
  //     // 2. 计算一行最多能放几个元素，补全布局
  //     this.init()
  //     // 3. 第一行
  //     this.firstLine();
  //     // 4. 其他一行
  //     this.otherLine();
  //   }
  //   init(){
  //     // 计算
  //   }
  //   firstLine(){
  //     // 获取所有元素高度
  //   }
  //   otherLine(){
  //     // 在其他行，获取最小列高
  //     // 将最小列高设置为top
  //     // 根据最小列高的索引计算left
  //     // 改变最小列高：原列高+当前元素高度
  //   }
  // }
  // new Waterfall(boxs);

  // 编程
  class Waterfall{
    constructor(cont, eles){
      // 1. 获取元素
      this.cont = cont;
      this.eles = eles;
      this.clientW = document.documentElement.clientWidth;
      this.boxW = this.eles[0].offsetWidth;
      // 2. 计算一行最多能放几个元素，补全布局
      this.init()
      // 3. 第一行
      this.firstLine();
      // 4. 其他一行
      this.otherLine();
    }
    init(){
      // 计算一行最多能放几个元素
      this.maxNum = parseInt(this.clientW / this.boxW);
      // 补全布局
      this.cont.style.width = this.maxNum * this.boxW + "px"
    }
    firstLine(){
      this.arr = [];
      for(let i=0;i<this.maxNum;i++){
        // 获取所有元素高度
        this.arr.push(this.eles[i].offsetHeight);
      }
    }
    otherLine(){
      for(let i=this.maxNum;i<this.eles.length;i++){
        // console.log(this.eles[i]);
        // 在其他行，获取最小列高
        const min = Math.min(...this.arr);
        const minIndex = this.arr.indexOf(min);
        this.eles[i].style.position = "absolute";
        // 将最小列高设置为top
        this.eles[i].style.top = min + "px";
        // 根据最小列高的索引计算left
        this.eles[i].style.left = minIndex * this.boxW + "px";
        // 改变最小列高：原列高+当前元素高度
        this.arr[minIndex] += this.eles[i].offsetHeight;
      }
    }
  }

  const boxs = document.querySelectorAll(".cont .box");
  const cont = document.querySelector(".cont");

  onload = function(){
    new Waterfall(cont, boxs);
  }


  
</script>
</html>